﻿function reDraw(context, arrayDraw) {
    context.clearRect(0, 0, 1000, 250);
    context.strokeStyle = "#000000";
    //alert(arrayDraw);
    length = arrayDraw.length;
    for (i = 0; i < length - 1; i++) {
        drawLine(context, i, arrayDraw[i], i + 1, arrayDraw[i + 1]);
        //drawLine(context, i, 50, i + 1, 50);
    }
}

function drawLine(context, startx, starty, endx, endy) {
    context.beginPath();
    context.moveTo(startx, starty);
    context.lineTo(endx, endy);
    context.closePath();
    context.stroke();
}

function drawLineDelay(context, startx, starty, endx, endy, delay) {
    setTimeout(function () {
        context.beginPath();
        context.moveTo(startx, starty);
        context.lineTo(endx, endy);
        context.closePath();
        context.stroke();
    }, delay);
}

function getCanvasContext(contextID) {
    var canvas = document.getElementById(contextID);
    var context = canvas.getContext('2d');
    return context;
}

function drawBackGround(contextID, maxX) {
    var context = getCanvasContext(contextID);
    context.strokeStyle = "#FF0000";
    context.lineWidth = 0.2;
    //Ve cac duong thang ngang cach nhau 20px
    for (i = 0; i <= 10; i++) {
        drawLine(context, 0, i * 20, maxX, i * 20);
    }
    maxXline = maxX / 20;
    //Ve cac duong thang doc cach nhau 20 px
    for (i = 0; i <= maxXline; i++) {
        drawLine(context, i * 20, 0, i * 20, 150);
    }
}

//function drawGraph(x, y, canvasName) {
//    length = x.length;
//    var maxX = x[length - 1].childNodes[0].nodeValue;
//    document.getElementById(canvasName).width = maxX;
//    drawBackGround(canvasName, maxX);
//    var context = getCanvasContext(canvasName);
//    context.strokeStyle = "#000000";
//    context.lineWidth = 0.5;
//    length = x.length;
//    for (i = 0; i < length - 1; i++) {
//        drawLine(context, x[i].childNodes[0].nodeValue, y[i].childNodes[0].nodeValue, x[i + 1].childNodes[0].nodeValue, y[i + 1].childNodes[0].nodeValue);
//    }

//}

function drawGraph12(resultArr, canvasName, yAxisFix, order) {
    var context = getCanvasContext(canvasName);
    canvas = document.getElementById(canvasName);
    //alert(resultArr[13].split(':')[1] * 2);
    //alert(resultArr[14] * 2);
    graphorder = order;
    //clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    //draw background
    length = resultArr.length;
    leadLength = Math.round(length / 13);

    //Đối với cột thời gian chỉ ghi dạng số
    //var maxX = Math.round(resultArr[13 * (leadLength - 1)] / 10);

    //Đối với cột thời gian ghi dạng hh:mm:ss.mmm
    var maxX = Math.round(resultArr[13 * (leadLength - 1)].split(':')[1] * 100);
    canvas.width = maxX;
    drawBackGround(canvasName, maxX);

    //draw graph
    context.strokeStyle = "#000000";
    context.lineWidth = 1;

    //Đối với cột thời gian chỉ ghi dạng số
    //    for (i = 0; i < leadLength - 2; i++) {
    //        drawLine(context, resultArr[13 * i] / 10,
    //        yAxisFix - 40 * resultArr[i * 13 + order],
    //        resultArr[13 * (i + 1)] / 10,
    //        yAxisFix - 40 * resultArr[13 * (i + 1) + order]);
    //    }
    //alert('hello');
    //Đối với cột thời gian ghi dạng hh:mm:ss.mmm
    for (i = 0; i < leadLength - 2; i++) {
        drawLine(context, resultArr[13 * i].split(':')[1] * 100,
        yAxisFix - 40 * resultArr[i * 13 + order],
        resultArr[13 * (i + 1)].split(':')[1] * 100,
        yAxisFix - 40 * resultArr[13 * (i + 1) + order]);
    }
}

function drawGraph(x, y, canvasName, yAxisFix) {
    var context = getCanvasContext(canvasName);
    canvas = document.getElementById(canvasName);
    //clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    length = x.length;
    var maxX = x[length - 1];
    canvas.width = maxX;
    drawBackGround(canvasName, maxX);
    context.strokeStyle = "#000000";
    context.lineWidth = 1;
    length = x.length;
    for (i = 0; i < length - 1; i++) {
        drawLine(context, x[i], yAxisFix - y[i], x[i + 1], yAxisFix - y[i + 1]);
    }
}

function clearGraph(canvasName) {
    var context = getCanvasContext(canvasName);
    canvas = document.getElementById(canvasName);
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function clearAllGraph() {
    clearGraph('canvasI');
    clearGraph('canvasII');
    clearGraph('canvasIII');
    clearGraph('canvasaVR');
    clearGraph('canvasaVL');
    clearGraph('canvasaVF');
    clearGraph('canvasV1');
    clearGraph('canvasV2');
    clearGraph('canvasV3');
    clearGraph('canvasV4');
    clearGraph('canvasV5');
    clearGraph('canvasV6');
}

// Quy doi 1mm = 4px; 0.1vol = 1mm; 0.04s = 1mm;
//int x = (int)(time * 100);
//int y = (int)(mvol * 40);

function drawZoomGraph(x, y, canvasName, yAxisFix, zoomRatio) {
    var context = getCanvasContext(canvasName);
    canvas = document.getElementById(canvasName);
    //clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    length = x.length;
    var maxX = x[length - 1] * zoomRatio;
    canvas.width = maxX;
    drawZoomBackGround(canvasName, maxX, zoomRatio);
    context.strokeStyle = "#000000";
    context.lineWidth = 1 - 0.075 / zoomRatio - 0, 1;
    length = x.length;
    for (i = 0; i < length - 1; i++) {
        drawLine(context, x[i] * zoomRatio, yAxisFix - y[i] * zoomRatio, x[i + 1] * zoomRatio, yAxisFix - y[i + 1] * zoomRatio);
    }
}

function drawZoomGraph12(resultArr, canvasName, yAxisFix, zoomRatio, order) {
    var context = getCanvasContext(canvasName);
    canvas = document.getElementById(canvasName);

    //clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    //draw background
    length = resultArr.length;
    leadLength = Math.round(length / 13);

    //Bản ghi thời gian dạng số
    //var maxX = zoomRatio * Math.round(resultArr[13 * (leadLength - 1)] / 10);

    //Bản ghi thời gian dạng hh:mm:ss:mmm
    var maxX = zoomRatio * Math.round(resultArr[13 * (leadLength - 1)].split(':')[1] * 100);

    canvas.width = maxX;    
    drawZoomBackGround(canvasName, maxX, yAxisFix, zoomRatio);

    //draw graph
    context.strokeStyle = "#000000";
    context.lineWidth = 1 - 0.075 / zoomRatio - 0, 1;
    for (i = 0; i < leadLength - 2; i++) {
        drawLine(context, zoomRatio * resultArr[13 * i].split(':')[1] * 100,
        yAxisFix - zoomRatio * 40 * resultArr[i * 13 + order],
        zoomRatio * resultArr[13 * (i + 1)].split(':')[1] * 100,
        yAxisFix - zoomRatio * 40 * resultArr[13 * (i + 1) + order]);
    }
}

function drawZoomBackGround(contextID, maxX, yAxisFix, zoomRatio) {
    var context = getCanvasContext(contextID);
    context.strokeStyle = "#FF0000";
    context.lineWidth = 0.2;
    //Ve cac duong thang ngang
    for (i = -7; i <= 7; i += 2) {
        drawLine(context, 0, yAxisFix - i * 10 * zoomRatio, maxX, yAxisFix - i * 10 * zoomRatio);
    }
    maxXline = maxX / (20 * zoomRatio);
    //Ve cac duong thang doc
    for (i = 0; i <= maxXline; i++) {
        drawLine(context, i * 20 * zoomRatio, yAxisFix - 7 * 10 * zoomRatio, i * 20 * zoomRatio, yAxisFix + 7 * 10 * zoomRatio);
    }
}

function loadDemoData() {
    var xmlhttp;
    var txt, x, i;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            xmlDoc = xmlhttp.responseXML;
            x = xmlDoc.getElementsByTagName("X");
            y = xmlDoc.getElementsByTagName("Y");
            drawGraph(x, y, 'canvasI');
            drawGraph(x, y, 'canvasII');
            drawGraph(x, y, 'canvasIII');
            drawGraph(x, y, 'canvasaVR');
            drawGraph(x, y, 'canvasaVL');
            drawGraph(x, y, 'canvasaVF');
            drawGraph(x, y, 'canvasV1');
            drawGraph(x, y, 'canvasV2');
            drawGraph(x, y, 'canvasV3');
            drawGraph(x, y, 'canvasV4');
            drawGraph(x, y, 'canvasV5');
            drawGraph(x, y, 'canvasV6');

            //Ve scrollbar - thuc chat la keo dan the div co id la scrollBar
            length = x.length;
            var maxX = x[length - 1].childNodes[0].nodeValue;
            document.getElementById("scrollBar").width = maxX;
        }
    }
    xmlhttp.open("GET", "data.xml", true);
    xmlhttp.send();
}

function moveLeft(step) {    
    var div1 = document.getElementById('I');
    var div2 = document.getElementById("II");
    var div3 = document.getElementById("III");
    var div4 = document.getElementById("aVR");
    var div5 = document.getElementById("aVL");
    var div6 = document.getElementById("aVF");
    var div7 = document.getElementById("V1");
    var div8 = document.getElementById("V2");
    var div9 = document.getElementById("V3");
    var div10 = document.getElementById("V4");
    var div11 = document.getElementById("V5");
    var div12 = document.getElementById("V6");
    div1.scrollLeft += -step;
    div2.scrollLeft += -step;
    div3.scrollLeft += -step;
    div4.scrollLeft += -step;
    div5.scrollLeft += -step;
    div6.scrollLeft += -step;
    div7.scrollLeft += -step;
    div8.scrollLeft += -step;
    div9.scrollLeft += -step;
    div10.scrollLeft += -step;
    div11.scrollLeft += -step;
    div12.scrollLeft += -step;

    var timeline = document.getElementById("timeline");
    timeline.innerHTML = "+" + (div1.scrollLeft * 0.01).toFixed(2) + "s";

    var scrollBar = document.getElementById('scrollBar_div');
    scrollBar.scrollLeft = div1.scrollLeft;
    //alert('ahfh');
}

function moveRight(step) {
    var div1 = document.getElementById('I');
    var div2 = document.getElementById("II");
    var div3 = document.getElementById("III");
    var div4 = document.getElementById("aVR");
    var div5 = document.getElementById("aVL");
    var div6 = document.getElementById("aVF");
    var div7 = document.getElementById("V1");
    var div8 = document.getElementById("V2");
    var div9 = document.getElementById("V3");
    var div10 = document.getElementById("V4");
    var div11 = document.getElementById("V5");
    var div12 = document.getElementById("V6");
    div1.scrollLeft += step;
    div2.scrollLeft += step;
    div3.scrollLeft += step;
    div4.scrollLeft += step;
    div5.scrollLeft += step;
    div6.scrollLeft += step;
    div7.scrollLeft += step;
    div8.scrollLeft += step;
    div9.scrollLeft += step;
    div10.scrollLeft += step;
    div11.scrollLeft += step;
    div12.scrollLeft += step;

    var timeline = document.getElementById("timeline");
    timeline.innerHTML = "+" + (div1.scrollLeft * 0.01).toFixed(2) + "s";

    var scrollBar = document.getElementById('scrollBar_div');
    scrollBar.scrollLeft = div1.scrollLeft;


}

function onScroll(scrollBar) {
    var div1 = document.getElementById('I');
    var div2 = document.getElementById("II");
    var div3 = document.getElementById("III");
    var div4 = document.getElementById("aVR");
    var div5 = document.getElementById("aVL");
    var div6 = document.getElementById("aVF");
    var div7 = document.getElementById("V1");
    var div8 = document.getElementById("V2");
    var div9 = document.getElementById("V3");
    var div10 = document.getElementById("V4");
    var div11 = document.getElementById("V5");
    var div12 = document.getElementById("V6");
    div1.scrollLeft = scrollBar.scrollLeft;
    div2.scrollLeft = scrollBar.scrollLeft;
    div3.scrollLeft = scrollBar.scrollLeft;
    div4.scrollLeft = scrollBar.scrollLeft;
    div5.scrollLeft = scrollBar.scrollLeft;
    div6.scrollLeft = scrollBar.scrollLeft;
    div7.scrollLeft = scrollBar.scrollLeft;
    div8.scrollLeft = scrollBar.scrollLeft;
    div9.scrollLeft = scrollBar.scrollLeft;
    div10.scrollLeft = scrollBar.scrollLeft;
    div11.scrollLeft = scrollBar.scrollLeft;
    div12.scrollLeft = scrollBar.scrollLeft;
    var timeline = document.getElementById("timeline");
    timeline.innerHTML = "+" + (div1.scrollLeft * 0.01).toFixed(2) + "s";
}

function unusualScroll(x) {
    var div1 = document.getElementById('I');
    var div2 = document.getElementById("II");
    var div3 = document.getElementById("III");
    var div4 = document.getElementById("aVR");
    var div5 = document.getElementById("aVL");
    var div6 = document.getElementById("aVF");
    var div7 = document.getElementById("V1");
    var div8 = document.getElementById("V2");
    var div9 = document.getElementById("V3");
    var div10 = document.getElementById("V4");
    var div11 = document.getElementById("V5");
    var div12 = document.getElementById("V6");
    var scrolldiv = document.getElementById("scrollBar_div");    
    scrolldiv.scrollLeft = x;
    div1.scrollLeft = x;
    div2.scrollLeft = x;
    div3.scrollLeft = x;
    div4.scrollLeft = x;
    div5.scrollLeft = x;
    div6.scrollLeft = x;
    div7.scrollLeft = x;
    div8.scrollLeft = x;
    div9.scrollLeft = x;
    div10.scrollLeft = x;
    div11.scrollLeft = x;
    div12.scrollLeft = x;
    var timeline = document.getElementById("timeline");
    timeline.innerHTML = "+" + (div1.scrollLeft * 0.01).toFixed(2) + "s";    
}

// Các hàm cho việc load dữ liệu từng phần

function loadAFrame(recordID) {
    //bật ảnh load dữ liệu
    $(".canvasDiv4Doctor").hide(); // Đối với trang bác sĩ - hide div vẽ canvas
    $(".canvas_div").hide(); //Đối với trang bệnh nhân - hide div vẽ canvas
    $(".loadingimage_div").show();

    $("#continueLoadingImg_div").css('visibility', 'visible');

    if ($("#hidden1") != null) {
        $("#hidden1").val('0');
    }
    //request = PageMethods._staticInstance.loadAFrame(recordID, OnSuccessLoadAFrame, OnFailContinueLoadAFrame);
    request = PageMethods.loadAFrame(recordID, OnSuccessLoadAFrame, OnFailContinueLoadAFrame);

    //điền thông tin bản ghi đang load;
    document.getElementById("lbRecordID").innerHTML = recordID;
}

function OnSuccessLoadAFrame(response) {
    //sau khi load dữ liệu thì bỏ ảnh loading
    $(".loadingimage_div").hide();
    $(".canvasDiv4Doctor").show();
    $(".canvas_div").show();

    var resultArr = response.split('\t');
    resultArr.splice(resultArr.length - 1, 1);
    arr1 = resultArr.splice(0, 2);
    check = arr1[0];
    offset = arr1[1];

    columnCheck = resultArr.splice(0, 12);
    dataArr = resultArr;
    drawWithColumnCheck(columnCheck, dataArr);

    length = dataArr.length;
    leadLength = Math.round(length / 13);
    var maxX = Math.round(resultArr[13 * (leadLength - 1)].split(':')[1] * 100);
    newLeadLength = leadLength;
    newMaxX = maxX;
    document.getElementById("scrollBar").width = maxX * 0.75; //Vẽ nhỏ lại khung hình
    __doPostBack("gridview1", "");
    if (check == 'not')
        continueLoadFrame(offset);
    else
        $("#continueLoadingImg_div").css('visibility', 'hidden');
}

function continueLoadFrame(offset) {
    request = PageMethods._staticInstance.continueLoadAFrame(offset, OnSuccessContinueLoadAFrame, OnFailContinueLoadAFrame);
}

function OnSuccessContinueLoadAFrame(response) {
    var resultArr = response.split('\t');
    resultArr.splice(resultArr.length - 1, 1);
    arr1 = resultArr.splice(0, 2);
    check = arr1[0];
    offset = arr1[1];

    //Mở rộng mảng dữ liệu
    //alert(dataArr.length + "+" + resultArr.length);
    //dataArr.concat(arr1);
    for (var x = 0; x < resultArr.length; x++) {
        dataArr.push(resultArr[x])
    }
    //alert(dataArr.length);


    length = dataArr.length;
    leadLength = Math.round(length / 13);
    oldLeadLength = newLeadLength;
    newLeadLength = leadLength;
    //alert(newLeadLength + ";" + oldLeadLength + ";" + leadLength);
    oldMaxX = newMaxX;
    newMaxX = Math.round(dataArr[13 * (leadLength - 1)].split(':')[1] * 100);
    //Xử lý vẽ mở rộng
    //continueDrawWithColumnCheck(columnCheck, dataArr);
    drawWithColumnCheck(columnCheck, dataArr);
    //Điều chỉnh scroll bar
    document.getElementById("scrollBar").width = newMaxX * 0.75; // Vẽ nhỏ lại khung hình
    //alert(newMaxX + ";" + oldMaxX);

    if (check == 'not')
        continueLoadFrame(offset);
    else {
        $("#continueLoadingImg_div").css('visibility', 'hidden');
        //__doPostBack("gridview1", "");
    }
}

function OnFailContinueLoadAFrame() {
    if (haveAnOtherRequest) {
        //Do nothing
        //Có hàm này chỉ để xử lý sự kiện khi gọi pagemethod không thành công và 
        //tiếp tục chạy các câu lệnh gọi hàm mới khi click vào gridview
    }
}

function continueDrawGraph(resultArr, canvasName, yAxisFix, order) {
    var context = getCanvasContext(canvasName);
    canvas = document.getElementById(canvasName);
    //alert(resultArr[13].split(':')[1] * 2);
    //alert(resultArr[14] * 2);
    graphorder = order;
    canvas.width = newMaxX;
    continueDrawBackground(canvasName, oldMaxX, newMaxX);

    context.strokeStyle = "#000000";
    context.lineWidth = 1;

    for (i = oldLeadLength; i < newLeadLength - 1; i++) {
        drawLine(context, resultArr[13 * i].split(':')[1] * 100,
                yAxisFix - 40 * resultArr[i * 13 + order],
                resultArr[13 * (i + 1)].split(':')[1] * 100,
                yAxisFix - 40 * resultArr[13 * (i + 1) + order]);
    }
}

function continueDrawBackground(contextID, oldX, newX) {
    var context = getCanvasContext(contextID);
    context.strokeStyle = "#FF0000";
    context.lineWidth = 0.2;
    for (i = 0; i <= 10; i++) {
        drawLine(context, oldX, i * 20, newX, i * 20);
    }

    //Ve cac duong thang doc cach nhau 20 px
    for (i = oldX / 20; i <= newX / 20; i++) {
        drawLine(context, i * 20, 0, i * 20, 150);
    }
}

function continueDrawWithColumnCheck(arr, resultArr) {
    if (arr[0] == 1) {
        continueDrawGraph(resultArr, 'canvasI', 70, 1);
    }
    if (arr[1] == 1) {
        continueDrawGraph(resultArr, 'canvasII', 70, 2);
    }
    if (arr[2] == 1) {
        continueDrawGraph(resultArr, "canvasIII", 70, 3);
    }
    if (arr[3] == 1) {
        continueDrawGraph(resultArr, "canvasaVR", 70, 4);
    }
    if (arr[4] == 1) {
        continueDrawGraph(resultArr, "canvasaVL", 70, 5);
    }
    if (arr[5] == 1) {
        continueDrawGraph(resultArr, "canvasaVF", 70, 6);
    }
    if (arr[6] == 1) {
        continueDrawGraph(resultArr, "canvasV1", 70, 7);
    }
    if (arr[7] == 1) {
        continueDrawGraph(resultArr, "canvasV2", 70, 8);
    }
    if (arr[8] == 1) {
        continueDrawGraph(resultArr, "canvasV3", 70, 9);
    }
    if (arr[9] == 1) {
        continueDrawGraph(resultArr, "canvasV4", 70, 10);
    }
    if (arr[10] == 1) {
        continueDrawGraph(resultArr, "canvasV5", 70, 11);
    }
    if (arr[11] == 1) {
        continueDrawGraph(resultArr, "canvasV6", 70, 12);
    }
}

function drawWithColumnCheck(arr, resultArr) {
    if (arr[0] == 1) {
        drawZoomGraph12(resultArr, 'canvasI', 53, 0.75, 1);
        //drawGraph12(resultArr, 'canvasI', 70, 1);
    }
    if (arr[1] == 1) {
        drawZoomGraph12(resultArr, 'canvasII', 53, 0.75, 2);
        //drawGraph12(resultArr, 'canvasII', 70, 2);
    }
    if (arr[2] == 1) {
        drawZoomGraph12(resultArr, "canvasIII", 53, 0.75, 3);
        //drawGraph12(resultArr, "canvasIII", 70, 3);
    }
    if (arr[3] == 1) {
        drawZoomGraph12(resultArr, "canvasaVR", 53, 0.75, 4);
        //drawGraph12(resultArr, "canvasaVR", 70, 4);
    }
    if (arr[4] == 1) {
        drawZoomGraph12(resultArr, "canvasaVL", 53, 0.75, 5);
        //drawGraph12(resultArr, "canvasaVL", 70, 5);
    }
    if (arr[5] == 1) {
        drawZoomGraph12(resultArr, "canvasaVF", 53, 0.75, 6);
        //drawGraph12(resultArr, "canvasaVF", 70, 6);
    }
    if (arr[6] == 1) {
        drawZoomGraph12(resultArr, "canvasV1", 53, 0.75, 7);
        //drawGraph12(resultArr, "canvasV1", 70, 7);
    }
    if (arr[7] == 1) {
        drawZoomGraph12(resultArr, "canvasV2", 53, 0.75, 8);
        //drawGraph12(resultArr, "canvasV2", 70, 8);
    }
    if (arr[8] == 1) {
        drawZoomGraph12(resultArr, "canvasV3", 53, 0.75, 9);
        //drawGraph12(resultArr, "canvasV3", 70, 9);
    }
    if (arr[9] == 1) {
        drawZoomGraph12(resultArr, "canvasV4", 53, 0.75, 10);
        //drawGraph12(resultArr, "canvasV4", 70, 10);
    }
    if (arr[10] == 1) {
        drawZoomGraph12(resultArr, "canvasV5", 53, 0.75, 11);
        //drawGraph12(resultArr, "canvasV5", 70, 11);
    }
    if (arr[11] == 1) {
        drawZoomGraph12(resultArr, "canvasV6", 53, 0.75, 12);
        //drawGraph12(resultArr, "canvasV6", 70, 12);
    }
}


